/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view >
		<view class="head" >
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class="back" @click="back()">
				<image src="/static/fanhui-black.png" mode=""></image>
			</view>
			<view class="search" v-if="!showManage">
				<input type="text" value="" placeholder="全部应用" />
				<uni-icon type="search" style='margin-left: 33upx;position: absolute;margin-top: 10upx;' size="20" color="#999999"></uni-icon>
			</view>
			<view class="manage-btn" @click="closeManage">搜索</view>
		</view>
		<view class="search-box">
			<view class="search-item" @click="toPage(myData[0].url)"> 
				<view class="item-img">
					<image src="/static/lyjq.png" mode=""></image>
				</view>
				<view class="item-right">
					<text class="item-title">旅游神器</text>
					<text class="item-des">景区内实现快速排队，优先预览景区详情</text>
				</view>
			</view>
			<view class="search-item" @click="toPage(myData[1].url)">
				<view class="item-img">
					<image src="/static/lyjq.png" mode=""></image>
				</view>
				<view class="item-right">
					<text class="item-title">旅游景区</text>
					<text class="item-des">花点时间让户外有情怀</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		data(){
			return{
				statusBarHeight: global.statusBarHeight + 'px',
				showManage:false,
				showOpen:false,
				isDbl:false,
				myNum:0,
				myData:[
					{
						name:'景区神器',
						img:'/static/shenqi.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/scenicSpot/shenqi'
					},
					{
						name:'旅游景区',
						img:'/static/lyjq.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/scenicSpot/scenicSpot'
					},
					{
						name:'宾馆入住',
						img:'/static/bgrz.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/hotel/hotel'
					},
					{
						name:'美食小吃',
						img:'/static/msxc.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/food/food'
					},
					{
						name:'出行票务',
						img:'/static/cxpw.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:true,
						typeId:1,
						must:true,
						url:''
					},
					{
						name:'休闲娱乐',
						img:'/static/xxyl.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/Recreation/recreation'
					},
					{
						name:'电商购物',
						img:'/static/dsgw.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/shop/shop'
					},
					{
						name:'见物识物',
						img:'/static/jwsb.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:true,
						typeId:1,
						must:true,
						url:''
					},
					{
						name:'团游旅行',
						img:'/static/tuanyou.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/crew/crew'
					},
					{
						name:'语音导览',
						img:'/static/yydy1.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:true,
						typeId:1,
						must:false,
						url:'/pages/home/scenicSpot/audio/spotAudio'
					},
					{
						name: '排队码',
						img: '/static/myPic/paiduima.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myLineUp/lineUp',
					},
					{
						name: '我的账单',
						img: '/static/myPic/zhangDan.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myBill/mybill',
					},
					{
						name: '我的成就',
						img: '/static/myPic/chengJiu.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myChengjiu/chengJiu',
					},
					{
						name: '我的足迹',
						img: '/static/myPic/zuJi.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myFoot/foot',
					},
					{
						name: '我的收藏',
						img: '/static/myPic/shouCang.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myCollection/collection',
					},
					{
						name: '合作加盟',
						des:'景区内实现快速排队，优先预览景区详情',
						img: '/static/myPic/jiaMeng.png',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/join/shopJoin/shopjoin',
					},
					{
						name: '会员中心',
						img: '/static/myPic/vip.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:false,
						typeId:2,
						must:false,
						url: '',
					},
					{
						name: 'SOS',
						img: '/static/myPic/sos.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:false,
						typeId:2,
						must:false,
						url: '',
					},
					{
						name: '上报POI',
						img: '/static/myPic/POI.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myPOI/myPOI',
					},
					{
						name: '离线地图',
						img: '/static/myPic/lixianMap.png',
						des:'景区内实现快速排队，优先预览景区详情',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myOfflineMap/cityList',
					},
				]
			}
		},
		methods: {
			openManage(){
				this.showManage = true
				this.showOpen = true
			},
			closeManage(){
				
				this.isDbl = false
				this.showManage = false
			},
			plusItem(obj){
				if(this.myNum<15&&!obj.isShow){
					this.myNum++
					obj.isShow = true
				}else{
					uni.showToast({
						title: '应用数量已达上限',
						duration: 1000
					});
				}
			},
			itemBtn(path){
				if(!this.showManage){
					uni.navigateTo({
						url:path
					})
				}
			},
			dblBtn(){
				if(this.showManage){
					if(!this.isDbl){
						this.isDbl = true
					}else{
						this.closeManage()
					}
					setTimeout(()=>{
						this.isDbl = false
					},300)
				}
			},
			minusItem(obj){
				obj.isShow = false
				this.myNum--
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toPage(path){
				uni.navigateTo({
					url:path
				})
			}
		},
		created(){
			this.myData.forEach((item)=>{
				if(item.isShow){
					this.myNum++
				}
			})
		},
		components:{
			uniIcon
		}
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.head{
		width: 100%;
		height: calc(80upx + var(--status-bar-height));
		position: fixed;
		top: 0;
		display: table;
		z-index: 5;
		background: #FFFFFF;
	}
	.back{
		width: 80upx;
		height: 80upx;
		z-index: 2;
		float: left;
		position: absolute;
	}
	.back image{
		margin: 22upx;
		width: 36upx;
		height: 36upx;
	}
	.search{
		width: 602upx;
		height: 80upx;
		/* padding:0 30upx; */
		left: 80upx;
		position: absolute;
		padding-top: 10upx;
		float: left;
	}
	.search input{
		width: 346upx;
		background: rgba(245,245,245,1.00);
		border-radius: 30upx;
		height: 60upx;
		padding:0 78upx;
		position: absolute;
		line-height: 60upx;
		font-size: 28upx;
	}
	.manage{
		width: 670upx;
		height: 80upx;
		/* background: #007AFF; */
		float: left;
	}
	.manage text{
		font-size: 34upx;
		width: 100%;
		position: absolute;
		text-align: center;
		display: block;
		height: 80upx;
		line-height: 80upx;
		left: 0;
		z-index: 1;
	}
	.manage-btn{
		width: 124upx;
		height: 50upx;
		border-radius: 30upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		line-height: 50upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		float: right;
		margin-top: 15upx;
		right: 31upx;
		position: absolute;
		z-index: 2;
	}
	.search-box{
		width: 750upx;
		height: calc(100vh - 120upx - var(--status-bar-height));
		top:calc(80upx + var(--status-bar-height));
		overflow: hidden;
		background: #FFFFFF;
		margin-top: 20upx;
		position: absolute;
		border-top: rgba(220,220,220,1.00) solid 1upx;
	}
	.search-item{
		width: 670upx;
		height: 130upx;
		border-bottom: rgba(220,220,220,1.00) solid 1upx;
		margin-left: auto;
		margin-right: auto;
	}
	.item-img{
		width: 83upx;
		height: 83upx;
		border-radius: 50%;
		background: rgba(246,246,246,1.00);
		float: left;
		position: relative;
		margin-top: 32upx;
	}
	.search-item image{
		width: 70upx ;
		/* margin-top: 4upx; */
		position: absolute;
		top: 8upx;
		margin-left: 8upx  ;
		height: 60upx  ; 
	}
	.item-right{
		width: 550upx;
		height: 100upx;
		margin-left: 35upx;
		padding-top: 30upx;
		float: left;
	}
	.item-title{
		width: 100%;
		display: block;
		font-size: 28upx;
	}
	.item-des{
		width: 100%;
		display: block;
		font-size: 26upx;
		color: rgba(153,153,153,1.00);
	}
</style>
